<template>
    <div>
        <button @click="showCode = !showCode">Toggle Code</button>
        <transition name="fade">
            <pre class="language-html" v-show="showCode" :style="{ maxHeight: showCode ? codeBlockHeight + 'px' : '0' }">
                                  <code ref="codeBlockRef"><slot></slot></code>
                                </pre>
        </transition>
    </div>
</template>
  
<script setup>
import { onMounted, ref } from 'vue'

const codeBlockRef = ref(null)
const codeBlockHeight = ref(0)
const showCode = ref(false)

onMounted(() => {
    codeBlockHeight.value = codeBlockRef.value.offsetHeight
})

</script>
  
<style>
.fade-enter-active,
.fade-leave-active {
    transition: max-height 0.3s ease-in-out;
}

.fade-enter,
.fade-leave-to {
    max-height: 0;
}
</style>
  